@import './common.styl'
boxShadow = 0px 0px 5px 5px #ecf1fa

.footer-nav
    float: left
    width: 438px
    height: 50px
    margin-left: 40px
    border-left: 1px solid #f1f1f1
    border-right: 1px solid #f1f1f1
    line-height: 10px
    margin-top: 15px
    ul
        float: left
        margin-left: 40px
        li
            &:nth-child(1)
                margin-top: -10px
            a
                font-size: 14px
                color: #9598a2
            &:nth-child(2)
                margin-top: 45px

.footer-logo
    width: 210px
    height: 75px
    float: left
    img
        width: 100%
        height: auto

.er-box
    display: none
    position: absolute
    top: 20px
    span
        display: block
        color: #808080
        font-size: 12px
        margin-top: -7px
        margin-left: 4px

.footer-bottom
    width: 100%
    text-align: center
    margin-top: 40px
    font-size: 14px
    color: #333
    p
        margin-bottom: 15px

.app-wechat
    float: right
    width: 270px

.center-top
    width: 100%

.person-cards
    float: left
    margin-top: 55px
    text-align: center
    margin-right: 55px

.download-box
    position: relative
    .download-up
        display: none
    .download-down
        margin-top: 2px
        margin-left: 3px

.person-info
    width: 100%
    height: 166px
    background-color: #1966ff
    background-image: url(../img/top-bg.jpg)
    background-repeat: no-repeat
    background-position: center

.person-cards-name
    margin-top: 18px

.my-line
    width: 220px
    height: 1px
    background: #e6e6e6
    margin: 6px auto

.center-main
    width:1200px
    margin: 0 auto
    margin-top: 77px
    .center-main-content
        width: bfb(920,@width)
        float: right
    .center-slider
        width: bfb(260,@width)
    &:after
        content: ''
        display: block
        height: 0
        clear: both

p,h1,h2,h3,h4,h5
    margin: 0
    padding: 0

body
    margin: 0
    padding: 0
    font-family: "微软雅黑"
    background: #fafafa

.footer-box
    width: 1200px
    margin: 0 auto
    background: #fff
    padding: 20px 0

.person-name
    color: #fafafa
    font-size: 20px

.person-name-rank
    float: left
    margin-left: 30px
    margin-top: 55px

footer
    width: 100%
    margin-top: 20px

.footer-top
    width: 995px
    margin: 0 auto
    overflow: hidden

.person-thumb
    width: 90px
    height: 90px
    border-radius: 50%
    overflow: hidden
    margin-top: 40px
    float: left
    img
        width: 90px
        height: auto

.my-message
    width: 120px
    height: 30px
    background: rgba(0,0,0,0.4)
    text-align: center
    line-height: 30px
    position: absolute
    top: 0
    left: 688px
    font-size: 12px
    color: #fff
    border-radius: 7px
    span
        margin-left: 3px
        cursor: pointer

.center-ad
    position: absolute
    bottom: -57px

.person-info-right
    float: right
    margin-right: 154px

.person-info-main
    margin: 0 auto
    position: relative
    height: 100%

.my-class
    border-left: 1px solid #e6e6e6
    padding-left: 10px

.signin-btn
    width: 180px
    height: 45px
    text-align: center
    line-height: 45px
    font-size: 20px
    color: #8b5e08
    background: #f1ab24
    border-radius: 20px

.app
    float: left
    width: 50%
    text-align: center
    p
        font-size: 14px
        color: #333
        margin-top: 8px

.signin-tip
    color: #FFFFFF
    font-size: 14px
    margin-top: 5px

.center-top-main
    margin: 0 auto
    height: 100px
    ul
        float: left
        margin-top: 40px
        position: relative
        li
            float: left
            margin-left: 40px
            & > img
                float: left
                margin-right: 10px
                margin-top: -2px
                &.download
                    margin-top: 6px
                    margin-left: 6px
            a
                color: #333333
                font-size: 16px
                &.download
                    float: left
                    color: #333333
                    font-weight: 500
            &.download-box
                &:hover
                    position: absolute
                    right: -130px
                    background: #fff
                    width: 100px
                    height: 120px
                    top: -8px
                    box-shadow: 3px 3px 3px #999
                    border-radius: 5px
                    overflow: hidden
                    & > img
                        &.download-down
                            display: none
                        &.download-up
                            margin-top: 14px
                            margin-left: 3px
                            display: block
                    a
                        margin: 0 auto
                        margin-top: 8px
                        margin-left: 9px
                        color: #1966ff
                    .er-box
                        display: block
                        color: #1966ff
                        margin-left: 11px
                        margin-top: 7px

.person-rank
    margin-top: 20px
    & > img
        float: left
        margin-top: 2px
    & > span
        font-size: 20px
        color: #fafafa
        margin-left: 10px

.signin
    float: left
    margin-top: 55px
    text-align: center

.center-slider
    
    float: left
    box-shadow: boxShadow
    background: #fff
    border-radius: 5px
    overflow: hidden
    padding: 5px 0
    dl
        dt
            font-size: 16px
            color: #9598a2
            padding: 0px 35px
            height: 48px
            line-height: 48px
        dd
            overflow: hidden
            width: 100%
            span
                float: left
                margin-top: 1px
                margin-left: 14px
            a
                display: block
                width: 100%
                height: 48px
                line-height: 48px
                color: #333
                padding: 0px 35px
                font-size: 16px
                border-left: 5px solid #fff
                &:hover
                    background: #f3f7ff
                    color: #1966ff
                    border-left: 5px solid #1966ff
                    img
                        filter: grayscale(0)
                img
                    filter: grayscale(1)
                    float: left
                    margin-top: 13px
                &.active
                    background: #f3f7ff
                    color: #1966ff
                    border-left: 5px solid #1966ff
                    img
                        filter: grayscale(0)

.logo
    float: left
    margin-top: 20px

.person-cards-num,.person-cards-name
    font-size: 20px
    color: #fafafa

.center-name
    float: left
    width: 108px
    height: 35px
    border-left: 5px solid #1966ff
    color: #1966ff
    font-weight: 600
    text-align: center
    line-height: 35px
    margin-left: 20px
    margin-top: 33px

.app-img
    width: 53px
    height: 53px
    margin: 0 auto
    img
        width: 100%
        height: auto

ul,li,a,dl,dt,dd
    list-style: none
    text-decoration: none
    margin: 0
    padding: 0
@media only screen and (min-width: 1448px)
    .center-main
        width:1200px
    .person-info-main
        width: 1200px
    .center-top-main
        width: 1200px
    .center-top-main ul li
        margin-left: 40px;
@media only screen and (max-width: 1448px)
    .center-main
        width:1000px
    .person-info-main
        width: 1000px
    .center-top-main
        width: 1000px
    .center-top-main ul li
        margin-left: 15px;

